<!--
 * @Description: 问卷统计页面
 * @Author: liyujie
 * @Date: 2021/06/05
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/06/05
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <div class="header">
                <div class="header-title">
                    商家问卷统计
                </div>
            </div>
            <!-- /header -->
            <div class="form-wrapper">
                <div class="question-header">
                    <div class="title">{{ title }}</div>
                </div>

                <div class="question-form">
                    <div
                        class="question-item"
                        v-for="(item, index) in dataList"
                        :key="index"
                    >
                        <div
                            class="question-item-title"
                            :class="item.required ? 'is-required' : ''"
                        >
                            {{ index + 1 }}、{{ item.title }} 【{{ item.type | typeFilter }}】
                        </div>
                        <div
                            class="question-item-table"
                            v-if="item.type === 2 || item.type === 3"
                        >
                            <el-table
                                :data="item.option"
                                border
                                show-summary
                                :summary-method="getSummaries(item)"
                            >
                                <el-table-column
                                    prop="title"
                                    label="选项"
                                    align="center"
                                    :formatter="emptyFormatter"
                                    show-overflow-tooltip
                                />
                                <el-table-column
                                    prop="submit_count"
                                    label="小计"
                                    align="center"
                                    show-overflow-tooltip
                                />
                                <el-table-column
                                    prop="title"
                                    label="比例"
                                    align="center"
                                >
                                    <template slot-scope="scope">
                                        {{ calcPercent(scope.row, item) }}%
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                        <div
                            class="question-item-btn"
                            v-else
                        >
                            <el-button
                                type="primary"
                                size="small"
                                @click="showDialog(item)"
                            >
                                查看详细信息
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="question-footer">
                    <el-button
                        size="medium"
                        style="width: 120px"
                        @click="handleRoute('shopQuestionnaireList')"
                    >
                        返回
                    </el-button>
                </div>
            </div>
        </div>
        <el-dialog
            title="查看详细信息"
            :visible.sync="dialogVisible"
            width="780px"
        >
            <el-table
                :data="dialogDataList"
                max-height="400"
                class="data-table"
            >
                <el-table-column
                    type="index"
                    width="50"
                    align="center"
                />
                <el-table-column
                    label="提交答卷时间"
                    align="center"
                    show-overflow-tooltip
                >
                    <template slot-scope="scope">
                        {{ scope.row.submit_time * 1000 | dateFormatter('yyyy/MM/dd HH:mm:ss') }}
                    </template>
                </el-table-column>
                <el-table-column
                    prop="value"
                    label="答案文本"
                    align="center"
                    show-overflow-tooltip
                    :formatter="emptyFormatter"
                />
                <el-table-column
                    label="查看答卷"
                    align="center"
                >
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            @click="handleRoute('shopQuestionnaireSubmitDetail', {id: scope.row.id, from_type: 'statistics'})"
                        >
                            查看答卷
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-dialog>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import { deepClone } from "@/assets/js/utils";

export default {
    name: 'ShopQuestionnaireStatistics',
    mixins: [back],
    components: {},
    data() {
        return {
            title: '',
            sq_no: '',
            dataList: [],
            dialogVisible: false,
            dialogDataList: []
        };
    },
    computed: {},
    watch: {},
    filters: {
        typeFilter(val) {
            switch (val) {
                case 1:
                    return '单行文本';
                case 6:
                    return '多行文本';
                case 2:
                    return '单选题';
                case 3:
                    return '多选题';
                default:
                    return '--';
            }
        }
    },
    mounted() {
        let query = this.$route.query;

        this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '商城'}, {title: '商家问卷', path: '/student/shop-questionnaire-list'}, {title: '问卷统计'}]);
        this.authResult = this.$route.meta.authResult;
        this.sq_no = query.sq_no;
        this.title = query.title;
        this.getDataList();
    },

    methods: {
        /**
         * @description 获取数据
         */
        getDataList() {
            let params = {
                sq_no: this.sq_no
            };

            this.$post('/student/shop_questionnaire%5Cget_statistic', params, res => {
                if (res.code === 1) {
                    this.dataList = res.data.list;
                } else {
                    this.$notify({
                        title: '提示',
                        message: res.msg,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * @description 过滤函数
         */
        emptyFormatter(row, column, val) {
            if (!val) return '--';
            return val;
        },

        /**
         * 小计行
         * @param item
         * @returns {function(): [string, (number|*), string]}
         */
        getSummaries(item) {
            return () => {
                return ['本题有效填写人数', item.submit_count, ''];
            };
        },

        /**
         * 计算百分比
         * @param row
         * @param item
         * @returns {string}
         */
        calcPercent(row, item) {
            if(!row.submit_count) {
                return '0.00';
            }
            return ((row.submit_count / item.submit_count) * 100).toFixed(2);
        },

        /**
         * 显示详情弹窗
         * @param item
         */
        showDialog(item) {
            this.dialogDataList = item.value_list;
            this.dialogVisible = true;
        }
    }
};
</script>

<style lang="less" scoped>
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 6px;
        }

        /*header*/

        .header {
            height: 68px;
            padding: 24px;
            box-sizing: border-box;
            box-shadow: 0px -1px 0px 0px #F0F2F5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-bottom: 1px solid #F0F2F5;

            .header-title {
                color: #333333;
                font-size: 20px;
                height: 20px;
                font-weight: 500;
                position: relative;
                margin: 24px 0 24px 12px;

                &::before {
                    content: '';
                    position: absolute;
                    left: -8px;
                    top: -1px;
                    width: 3px;
                    height: 20px;
                    background: #1890FF;
                }
            }
        }
    }
    .form-wrapper {
        .question-header {
            padding: 24px 0;
            border-bottom: 1px dashed #DCDFE6;
            .title {
                font-size: 24px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                text-align: center;
            }
        }
        .question-form {
            padding: 32px 165px 0;
            .question-item {
                margin-bottom: 42px;
                &-title {
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    line-height: 22px;;
                    margin-bottom: 16px;
                }
            }
        }
        .question-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 52px;
        }
        .is-required {
            &:before {
                content: "*";
                display: inline-block;
                color: #F56C6C;
                margin-right: 4px;
            }
        }
    }
    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow:0 1px 0 0 rgba(233,233,233,1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;
        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }
        .el-icon-close:before {
            color: rgb(194,194,194);
            font-size: 17px;
            font-weight: bold;
        }
        .el-dialog__headerbtn {
            top: 14px;
        }
    }
    /deep/ .el-textarea__inner {
        resize: none;
    }
    /deep/ .el-table__fixed-right {
        right: 6px!important;
    }
    .data-table {
        ::-webkit-scrollbar {
            width: 6px;
            height: 6px;
        }
        // 操作按钮
        .option-btn-group {
            .el-button {
                margin-left: 0;
                margin-right: 10px;
            }
        }
    }
}
</style>
